{% extends "base.html" %}
{% load static %}
{% block title %}首页{% endblock title %}

{% block css %}
    <!--
    Masonry+Infinite-Scroll实现无刷新无分页完美瀑布流
    https://www.cnblogs.com/xingmeng/p/3525232.html
    -->
    {#    <script src="{% static 'mood/js/masonry.pkgd.min.js' %}"></script>  <!-- 瀑布流 -->#}
    <link rel="stylesheet" href="{% static 'mood/css/hover-min.css' %}" rel="stylesheet">

    <style>
        .paginator {
            color: white;
            text-align: center;
            text-decoration: none;
        }

        .prevnext {
            font-size: x-large;
        }

        .current {
            font-size: xx-large;
            padding-left: 10px;
            padding-right: 10px;
        }

    </style>

{% endblock %}

{% block content %}
    <div class="container py-2">
        <div style="margin-top: 50px">
            <div class="row row-cols-4 masonry" data-masonry='{"percentPosition": true}' id="cards">
                {% for img in data %}
                    {% if img.thumbnail_url %}
                        <div class="col-4 py-2 grid-item">
                            <div class="card hvr-buzz">
                                <a href="#"
                                   data-toggle="modal"
                                   data-target="#image"
                                   data-id="{{ img.id }}"
                                   data-url="{{ img.file_url }}"
                                >
                                    <img src="{{ img.thumbnail_url }}"
                                         alt=""
                                         class="card-img">
                                </a>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>

            <!-- 分页器
            <div class="row justify-content-center py-5">
                <span class="step-links paginator">
                    {% if data.has_previous %}
                        <a href="?page=1"
                           class="paginator prevnext">&laquo;</a>
                        <a href="?page={{ data.previous_page_number }}"
                           class="paginator prevnext">{{ data.previous_page_number }}</a>
                    {% endif %}

                    <span class="current">{{ data.number }}</span>

                    {% if data.has_next %}
                        <a href="?page={{ data.next_page_number }}"
                           class="paginator prevnext">{{ data.next_page_number }}</a>
                        <a href="?page={{ data.paginator.num_pages }}"
                           class="paginator prevnext">&raquo;</a>
                    {% endif %}
                </span>
            </div>
             -->


            <!-- status elements -->
            <div class="scroller-status">
                <div class="infinite-scroll-request loader-ellips">
                    ...
                </div>
                <p class="scroller-status__message infinite-scroll-last">End of content</p>
                <p class="scroller-status__message infinite-scroll-error">No more pages to load</p>
            </div>

            {% if data.has_next %}
                <div id="page-nav">
                    <a href="?page={{ data.next_page_number }}" class="infinite-more-link pagination__next"
                       aria-label="Next"></a>
                </div>
            {% endif %}

        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="image" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <img src="" alt="" class="card-img">
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script src="{% static 'mood/js/infinite-scroll.pkgd.min.js' %}"></script>      <!-- 无限滚动插件 -->
    {#    <script src="{% static 'mood/js/jquery.waypoints.min.js' %}"></script>#}
    <script src="{% static 'mood/js/masonry.pkgd.min.js' %}"></script>  <!-- 瀑布流 -->
    <script src="{% static 'mood/js/imagesloaded.pkgd.min.js' %}"></script>  <!-- 瀑布流 -->

    <script type='text/javascript'>
        // 页面框架加载完成之后自动执行函数
        $(function () {
            initModal();
            masonry2();
            loadImage();
        });

        // 模态框初始化
        function initModal() {
            $('#image').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget); // Button that triggered the modal
                var id = button.data('id'); // 图片ID
                var url = button.data('url'); // 图片ID
                var modal = $(this);
                // modal.find('.card-img').text("回复：" + name);
                modal.find('.card-img').attr("src", url);
            });
        }

        function masonry() {
            var $container = $('#cards');
            $container.imagesLoaded(function () {
                $container.masonry({
                    itemSelector: '.grid-item',
                    percentPosition: true,
                    isAnimated: true,//使用jquery的布局变化  Boolean
                    horizontalOrder: true,
                    animationOptions: {
                        //jquery animate属性 渐变效果  Object { queue: false, duration: 500 }
                    },
                });
            });
        }

        function masonry2() {
            $('#cards').imagesLoaded(function () {
                new Masonry(document.getElementById('cards'), {
                    itemSelector: '.grid-item',
                    percentPosition: true,
                    horizontalOrder: true,
                    isAnimated: true,//使用jquery的布局变化  Boolean
                    animationOptions: {
                        //jquery animate属性 渐变效果  Object { queue: false, duration: 500 }
                    },
                });
            });
        }

        function loadImage() {
            var $container = $('#cards');
            $container.imagesLoaded(function () {
                $container.masonry({
                    // options...
                    // navSelector: '#page-nav',
                    // nextSelector: '#page-nav a', //下一页选择器
                    horizontalOrder: true,
                    itemSelector: '.grid-item',//下一页中需要被加载进当前页的块
                    percentPosition: true,
                    isAnimated: true,//使用jquery的布局变化  Boolean
                    animationOptions: {
                        //jquery animate属性 渐变效果  Object { queue: false, duration: 500 }
                    },
                })
            });

            var data = $container.data('masonry');

            $container.infiniteScroll({
                path: '.pagination__next',
                history: false,
                append: '.grid-item',
                status: '.scroller-status',
                hideNav: '#page-nav',
                outlayer: data,
                animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
                // extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载，默认150
                bufferPx: 40,//载入信息的显示时间，时间越大，载入信息显示时间越短
                loading: {
                    finishedMsg: 'No more pages to load.',
                    loadingText: '加载中',
                    img: 'http://i.imgur.com/6RMhx.gif',
                },
            });
        }

        function loadImage2() {
            var $container = $('#cards');
            $container.imagesLoaded(function () {
                $container.masonry({
                    itemSelector: '.grid-item',
                    gutterWidth: 20,
                    isAnimated: true,
                });
            });

            {#var data = $container.data('masonry');#}

            $container.infiniteScroll({
                path: '.pagination__next',
                {#history: false,#}
                {#append: '.grid-item',#}
                {#status: '.scroller-status',#}
                hideNav: '#page-nav',
                navSelector: '#page-nav',
                nextSelector: '#page-nav a',
                itemSelector: '.grid-item',
                {#outlayer: data,#}
                animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
                // extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载，默认150
                bufferPx: 40,//载入信息的显示时间，时间越大，载入信息显示时间越短
                errorCallback: function () {
                    alert('error');
                }, //当出错的时候，比如404页面的时候执行的函数
                localMode: true, //是否允许载入具有相同函数的页面，默认为false
                loading: {
                    finishedMsg: 'No more pages to load.',
                    loadingText: '加载中',
                    img: 'http://i.imgur.com/6RMhx.gif',
                },
            }, function (newElements) {
                alert('hello')
                var $newElems = $(newElements).css({opacity: 0});
                $newElems.imagesLoaded(function () {
                    $newElems.animate({opacity: 1});
                    $container.masonry('appended', $newElems, true);
                });
            });
        }

    </script>
{% endblock %}
